<script lang="ts" setup>
import {ref} from 'vue';
import {message} from 'ant-design-vue';
import {PlusOutlined, SearchOutlined, EditOutlined, DeleteOutlined} from '@ant-design/icons-vue';

interface LanguageItem {
  key: number;
  id: number;
  'zh-cn': string;
  'en-us': string;
  'ja-jp': string;
  'ko-kr': string;
  'fr-fr': string;
  'de-de': string;
  'es-es': string;
  'pt-pt': string;
  'it-it': string;
  'ru-ru': string;
}

const searchKeyword = ref('');

const columns = [
  {title: 'ID', dataIndex: 'id', key: 'id', fixed: 'left', width: 80, sorter: true},
  {title: '中文', dataIndex: 'zh-cn', key: 'zh-cn', width: 150},
  {title: '英语', dataIndex: 'en-us', key: 'en-us', width: 150},
  {title: '日语', dataIndex: 'ja-jp', key: 'ja-jp', width: 150},
  {title: '韩语', dataIndex: 'ko-kr', key: 'ko-kr', width: 150},
  {title: '法语', dataIndex: 'fr-fr', key: 'fr-fr', width: 150},
  {title: '德语', dataIndex: 'de-de', key: 'de-de', width: 150},
  {title: '西班牙语', dataIndex: 'es-es', key: 'es-es', width: 150},
  {title: '葡萄牙语', dataIndex: 'pt-pt', key: 'pt-pt', width: 150},
  {title: '意大利语', dataIndex: 'it-it', key: 'it-it', width: 150},
  {title: '俄语', dataIndex: 'ru-ru', key: 'ru-ru', width: 150},
  {title: '操作', key: 'action', fixed: 'right', width: 150}
];

const dataSource: LanguageItem[] = [
  {
    key: 1,
    id: 1,
    'zh-cn': '欢迎使用',
    'en-us': 'Welcome',
    'ja-jp': 'ようこそ',
    'ko-kr': '환영합니다',
    'fr-fr': 'Bienvenue',
    'de-de': 'Willkommen',
    'es-es': 'Bienvenido',
    'pt-pt': 'Bem-vindo',
    'it-it': 'Benvenuto',
    'ru-ru': 'Добро пожаловать'
  },
  {
    key: 2,
    id: 2,
    'zh-cn': '设置',
    'en-us': 'Settings',
    'ja-jp': '設定',
    'ko-kr': '설정',
    'fr-fr': 'Paramètres',
    'de-de': 'Einstellungen',
    'es-es': 'Ajustes',
    'pt-pt': 'Configurações',
    'it-it': 'Impostazioni',
    'ru-ru': 'Настройки'
  },
  {
    key: 3,
    id: 3,
    'zh-cn': '用户管理',
    'en-us': 'User Management',
    'ja-jp': 'ユーザー管理',
    'ko-kr': '사용자 관리',
    'fr-fr': 'Gestion des utilisateurs',
    'de-de': 'Benutzerverwaltung',
    'es-es': 'Gestión de usuarios',
    'pt-pt': 'Gerenciamento de usuários',
    'it-it': 'Gestione utenti',
    'ru-ru': 'Управление пользователями'
  }
];

const pagination = ref({
  total: 100,
  current: 1,
  pageSize: 10,
  showSizeChanger: true,
  showTotal: (total: number) => `共 ${total} 条`
});

const handleCreate = () => {
  message.success('点击了创建按钮');
};

const handleEdit = (record: LanguageItem) => {
  message.info(`编辑记录 ID: ${record.id}`);
};

const handleDelete = (record: LanguageItem) => {
  message.warning(`删除记录 ID: ${record.id}`);
};

const onSearch = (value: string) => {
  message.info(`搜索关键字: ${value}`);
};

const handleTableChange = (pag: any, filters: any, sorter: any) => {
  pagination.value.current = pag.current;
  pagination.value.pageSize = pag.pageSize;
  // 这里可以处理表格变化，比如排序、筛选等
};
import ListLayout from "@/components/list-layout.vue";
</script>

<template>
  <ListLayout>
    <template #tools>
      <a-button type="primary" class="!rounded-button whitespace-nowrap flex items-center"
                @click="handleCreate">
        <plus-outlined/>
        创建多语言
      </a-button>

      <a-input-search
        v-model:value="searchKeyword"
        placeholder="请输入关键字搜索"
        class="w-64 !rounded-button"
        @search="onSearch"
      >
        <template #prefix>
          <search-outlined class="text-gray-400"/>
        </template>
      </a-input-search>
    </template>
    <a-table
      :columns="columns"
      :data-source="dataSource"
      :scroll="{ x: 1500 }"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <space>
            <a-button type="link" class="!rounded-button whitespace-nowrap"
                      @click="handleEdit(record)">
              <edit-outlined/>
              编辑
            </a-button>
            <a-button type="link" danger class="!rounded-button whitespace-nowrap"
                      @click="handleDelete(record)">
              <delete-outlined/>
              删除
            </a-button>
          </space>
        </template>
      </template>
    </a-table>
  </ListLayout>
</template>

